<template>

  <div>

<!--    <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>-->
<!--    <input type="button" value="显示编辑器内容（从控制台查看）" @click="returnContent">-->
    <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
    <p>
      <el-button type="primary" @click="returnContent">获取编辑器内容</el-button>
    </p>

    <div v-html="msg"></div>

  </div>

</template>

<script>

  import VueUeditorWrap from 'vue-ueditor-wrap'
  export default {

    components: {
      VueUeditorWrap
    },

    data () {

      return {

        msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
        myConfig: {
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 440,
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
          serverUrl: '/mzyl/config',
          // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
          UEDITOR_HOME_URL: '/static/UEditor/',

          toolbars:[
            [
              'bold',//加粗
              'italic',//斜体
              'underline',//下划线
              'insertvideo',//视频上传
              'insertimage',//多图上传
              'insertcode', //代码语言
            ]
          ]
        },

      }

    },

    mounted(){
      console.log(this.myConfig.serverUrl)
      setTimeout(() => {
        const editId = document.getElementsByClassName('edui-default')[0].id
        this.editor = UE.getEditor(editId) // 初始化UE
        UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl
        UE.Editor.prototype.getActionUrl = function (action) {
          if (action === 'uploadimage') {
            return '/mzyl/uploadImage'
          } else if (action === 'uploadvideo') {
            return '/mzyl/uploadVideo'
          } else {
            return this._bkGetActionUrl.call(this, action)
          }
        }
        this.editor.addListener('ready', () => {
          this.$emit('getUe', this.msg)
        })
      }, 200)
    },
    methods: {


      returnContent () {


        console.log(this.msg)

      }

    }

  }

</script>
